<template>
	<div class="message-reacord-container">
		<div v-for="(item, index) in msgData.list" :key="item" class="message-reacord" :class="index % 2 !== 0 ? 'white' : 'gray'">
			<div class="user-avatar">
				<el-avatar :size="50" :src="defaultAgentAvatar" v-if="item.isRobot === false"></el-avatar>
				<el-avatar :size="50" :src="defaultRobotAvatar" v-else></el-avatar>
			</div>
			<div class="message-box-session-wrapper">
				<p class="top">
					<span class="agent-name">坐席{{ item.agentName }}</span>
					<span class="date">{{ item.createdAt }}</span>
				</p>
				<p class="text">
					<span> &lt;{{ item.customerName }}&gt;</span>
					<span v-if="item.type == 'faceRecognition'">{{ '人脸检测对比返回结果：' }}</span>
					<span v-if="item.type == 'livenessDetection'">{{ '活体检测对比返回结果：' }}</span>
					<span class="result">{{ getResult(item.result) }}</span>
				</p>
				<p>
					<span>识别的图片：</span>
					<span class="textPic" @click="openOnclick(item.content)">{{ item.content }}</span>
				</p>
			</div>
		</div>
	</div>
</template>

<script>
import defaultCustomerImg from '@/assets/img/upload/default_customer.png';
import defaultAgentAvatarImg from '@/assets/img/upload/agent_avatar.png';
import defaultRobotAvatarImg from '@/assets/img/upload/jiqiren.png';
export default {
	props: {
		msgData: {
			type: Object,
			required: true,
			default: () => {}
		}
	},
	data() {
		return {
			defaultCustomer: defaultCustomerImg,
			defaultAgentAvatar: defaultAgentAvatarImg,
			defaultRobotAvatar: defaultRobotAvatarImg
		};
	},
	mounted() {
		console.log('global check record data ',this.msgData);
	},
	methods: {
		getResult(value) {
			let result = '';
			switch (value) {
				case 'pass':
					result = '通过';
					break;
				case 'failed':
					result = '失败';
					break;
				case 'timeout':
					result = '超时';
					break;
				default:
					result = '';
					break;
			}
			return result;
		},
		openOnclick(url) {
			window.open(url, '_blank');
		}
	}
};
</script>

<style lang="less" scoped>
.message-reacord-container {
	padding-top: 20px;
	// display: flex;
	.message-box-session-wrapper {
		padding-left: 20px;
	}
	.top {
		color: #8e8e93;
	}
	.text {
		// padding: 14px 0;
		color: #606266;
	}
	.message-reacord {
		display: flex;
		margin-top: 20px;
	}
	.textPic {
		padding-top: 12px;
		color: #6384fe;
		border-bottom: 1px solid #6384fe;
	}
	.white {
		padding: 0 20px;
		background-color: #fff;
	}
	.gray {
		padding: 20px;
		background: #f7f8f9;
	}
}
</style>
